﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="ZX.Web.UI.Controls.BasePage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .navbar-inner
        {
            background-color: #eee;
        }
        
        .menuSelected
        {
            border-left: 1px solid #A8A8A8;
            border-right: 1px solid #A8A8A8;
            border-top: 1px solid #A8A8A8;
            border-bottom: 0px;
            background-color: #fff;
            z-index: 1001;
            position: relative;
        }
        .navbar .nav > li > a
        {
            color: #eee;
            text-decoration: none;
            background-color: transparent;
        }
        
        .navbar .nav > li > a:hover
        {
            color: #000;
            text-decoration: none;
            background-color: transparent;
        }
        .navbar .nav .active > a
        {
            color: rgb(255, 255, 255);
            text-decoration: none;
            background-color: rgb(34, 34, 34);
        }
        .navbar .nav .active > a:hover
        {
            color: rgb(255, 255, 255);
            text-decoration: none;
            background-color: rgb(34, 34, 34);
        }
        
        
        
        .tabs
        {
            float: left;
            background-color:#fff;
            width: 100%;
            margin-bottom:0px;
            height:25px;
            z-index:100px;
            border-top:1px solid #B4C9C6;
        }
        .tabs ul
        {
            list-style: none outside none;
            margin: 0;
            padding: 0;
        }
        .tabs ul li
        {
            float: left;
            line-height: 24px;
            margin: 0;
            padding: 2px 20px 0 15px;
        }
        .tab-nav
        {
            background: url(themes/images/manage_r2_c14.jpg) no-repeat;
            border:1px solid #eee;
            cursor: pointer;
        }
        .tab-nav-action
        {
            background: url(themes/images/manage_r2_c13.jpg) no-repeat;
            background-color:#eee;
            cursor: pointer;
        }
        .tabs-body
        {
          
            border-left: 1px solid #B4C9C6;
            border-right: 1px solid #B4C9C6;
            border-top: 1px solid #B4C9C6;
            float: left;
            margin-top:40px;
            padding: 0px 0 0;
            width: 99%;
        }
        .tabs-body div
        {
            padding: 0px;
        }
    </style>
    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/ctrls/jquery.menu.js" type="text/javascript"></script>
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div style="float:left; margin-left:5px;widht:250px; padding:5px; font-weight:bold" class="brand">中旭信息系统</div>
            <div class="container">
 
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class=""><a href="#">CRM</a> </li>
                        <li class=""><a href="#">HR</a> </li>
                        <li class=""><a href="#">流程</a> </li>
                        <li class=""><a href="#">我的任务</a> </li>
                        <li class=""><a href="#">关于我</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="tabs-body" class="tabs-body">
        <div style="display: none"><iframe scrolling="auto" frameborder="0"  src="../../../DeskTop/Form/DesktopMain.aspx" style="width:100%;height:100%; margin:0px;"></iframe></div>
        <div style="display: block">
            1111111
        </div>
        <div style="display: none">
            222222222
        </div>
        <div style="display: none">
            33333333333
        </div>
        <div style="display: none">
            4444444444
        </div>
        <div style="display: none">
            555555555555555
        </div>
    </div>
    <div class="tabs">
        <ul id="tabs">
            <li class="tab-nav">主页</li>
            <li class="tab-nav">管理导航</li>
            <li class="tab-nav-action">系统设置</li>
            <li class="tab-nav">用户管理</li>
            <li class="tab-nav">内容管理</li>
            <li class="tab-nav">其他管理</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    function addTabs(title, pageurl, icon) {
        if (!$('#tabs').tabs('exists', title)) {
            $('#tabs').tabs('add', {
                title: title,
                content: createFrame(pageurl),
                iconCls: icon,
                closable: true,
                width: $(document).width() - 10,
                height: $(document).height() - 26
            });
        } else {
            $('#tabs').tabs('select', title);
        }
    }

    function InitTabs() {
        $("#tabs li").bind("click", function () {
            var index = $(this).index();
            var divs = $("#tabs-body > div");
            $(this).parent().children("li").attr("class", "tab-nav"); //将所有选项置为未选中
            $(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式
            divs.hide(); //隐藏所有选中项内容
            divs.eq(index).show(); //显示选中项对应内容
        });
    }




    function fnResize() {
        $("#tabs-body").width($(window).width() - 2);
        $("#tabs-body").height($(window).height() - 70);
        $("#tabs-body>div").height($(window).height() - 65);
    }

    $(window).resize(function () {
        fnResize();
    });



    //添加选项卡
    function addTabs(title, pageurl, icon) {
        $("#tabs").append(" <li class=\"tab-nav\">" + title + "</li>");
        var width = ($(window).width() - 2);
        var height = ($(window).height() - 70);

        $("#tabs-body").append("<div style=\"width:"+width+"px;height:"+height+"px;\"><iframe scrolling=\"auto\" frameborder=\"0\"\"  src=\""+pageurl+"\" style=\"width:100%;height:100%; margin:0px;\"></iframe></div>");
        fnResize();
        InitTabs();
        var index = $("#tabs li").length - 1;
        var divs = $("#tabs-body > div");
        divs.hide();
        divs.eq(index).show();
    }

    $(document).ready(function () {
        $(".nav>li").menu();

        InitTabs();
        fnResize();
    });
</script>
</html>
